<template>
  <view>
    <!-- 页面主体按钮 -->
    <u-button type="primary" @click="isShow = true">分享链接</u-button>

    <!-- 分享弹窗 -->
    <u-popup v-model="isShow" type="center" :mask="true" :closeable="false" :round="8">
      <view class="popup-content">
        <!-- 标题栏 -->
        <view class="popup-header">
          <text class="title">分享链接</text>
          <u-icon name="close" size="24" color="#666" @click="isShow = false" class="close-btn"></u-icon>
        </view>

        <!-- 数字邀请码 -->
        <view class="content-item">
          <text class="item-title">数字邀请码</text>
          <u-input disabled border-bottom placeholder="请输入邀请码" v-model="inviteCode" class="invite-code-input"></u-input>
        </view>

        <!-- 链接二维码邀请 -->
        <view class="content-item">
          <text class="item-title">链接二维码邀请</text>
          <view class="link-info">
            <u-input disabled border-bottom placeholder="链接有效期：" v-model="validDays" suffix-icon="arrowdown" class="valid-input"></u-input>
            <u-button type="error" size="small" @click="copyLink">复制链接</u-button>
          </view>
          
          <view class="qrcode-box">
            <image src="https://example.com/qrcode.png" mode="widthFix" class="qrcode-img"></image>
          </view>

          <u-button type="error" block @click="shareQrCode" class="share-btn">分享二维码</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isShow = ref(false);
const inviteCode = ref('5456871463');
const validDays = ref('7天');

// 复制链接逻辑
const copyLink = () => {
  // 这里实现复制逻辑，可使用uView的u-copy组件或原生API
  console.log('复制链接');
};

// 分享二维码逻辑
const shareQrCode = () => {
  // 这里实现分享逻辑
  console.log('分享二维码');
};
</script>

<style scoped>
.popup-content {
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
}

.close-btn {
  margin-left: 16rpx;
}

.content-item {
  padding: 32rpx 0;
}

.item-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.invite-code-input {
  font-size: 28rpx;
  color: #666;
}

.link-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.valid-input {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  border-bottom: 1rpx solid #f0f0f0;
}

.qrcode-box {
  width: 100%;
  height: 300rpx;
  margin: 32rpx 0;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-img {
  width: 200rpx;
  height: 200rpx;
}

.share-btn {
  font-size: 30rpx;
  padding: 16rpx 0;
  border-radius: 8rpx;
}
</style><template>
  <view>
    <!-- 页面主体按钮 -->
    <u-button type="primary" @click="isShow = true">分享链接</u-button>

    <!-- 分享弹窗 -->
    <u-popup v-model="isShow" type="center" :mask="true" :closeable="false" :round="8">
      <view class="popup-content">
        <!-- 标题栏 -->
        <view class="popup-header">
          <text class="title">分享链接</text>
          <u-icon name="close" size="24" color="#666" @click="isShow = false" class="close-btn"></u-icon>
        </view>

        <!-- 数字邀请码 -->
        <view class="content-item">
          <text class="item-title">数字邀请码</text>
          <u-input disabled border-bottom placeholder="请输入邀请码" v-model="inviteCode" class="invite-code-input"></u-input>
        </view>

        <!-- 链接二维码邀请 -->
        <view class="content-item">
          <text class="item-title">链接二维码邀请</text>
          <view class="link-info">
            <u-input disabled border-bottom placeholder="链接有效期：" v-model="validDays" suffix-icon="arrowdown" class="valid-input"></u-input>
            <u-button type="error" size="small" @click="copyLink">复制链接</u-button>
          </view>
          
          <view class="qrcode-box">
            <image src="https://example.com/qrcode.png" mode="widthFix" class="qrcode-img"></image>
          </view>

          <u-button type="error" block @click="shareQrCode" class="share-btn">分享二维码</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isShow = ref(false);
const inviteCode = ref('5456871463');
const validDays = ref('7天');

// 复制链接逻辑
const copyLink = () => {
  // 这里实现复制逻辑，可使用uView的u-copy组件或原生API
  console.log('复制链接');
};

// 分享二维码逻辑
const shareQrCode = () => {
  // 这里实现分享逻辑
  console.log('分享二维码');
};
</script>

<style scoped>
.popup-content {
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
}

.close-btn {
  margin-left: 16rpx;
}

.content-item {
  padding: 32rpx 0;
}

.item-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.invite-code-input {
  font-size: 28rpx;
  color: #666;
}

.link-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.valid-input {
  flex: 1;
  font-size: 28rpx;
  color: #666;
  border-bottom: 1rpx solid #f0f0f0;
}

.qrcode-box {
  width: 100%;
  height: 300rpx;
  margin: 32rpx 0;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-img {
  width: 200rpx;
  height: 200rpx;
}

.share-btn {
  font-size: 30rpx;
  padding: 16rpx 0;
  border-radius: 8rpx;
}
</style>